<template>
  <div class="notice-container">
    <div class="notice-search">
      <el-form :inline="true" :model="searchform" ref="searchform" class="demo-form-inline">
        <el-form-item label="查询">
          <el-input v-model="searchform.key" placeholder="标题/内容查询" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="状态" v-if="tab == 1">
          <el-select v-model="searchform.status" placeholder="状态" size="small">
            <el-option
              v-for="item in status.recive"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="list">查询</el-button>
          <el-button type="primary" size="mini" @click="resetForm('searchform')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="notice-body">
      <el-button
        v-if="this.tab === '0'"
        type="primary"
        size="mini"
        style="margin-bottom: 20px;"
        @click="handleAdd"
      >添加</el-button>
      <el-table :data="data" style="width: 100%;margin-bottom: 20px;">
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="content" label="内容"></el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template v-slot="{row}">
            <div v-if="tab == 0">
              <span v-if="row.status === 0">草稿</span>
              <span v-else-if="row.status === 1">已发送</span>
              <span v-else>发送中</span>
            </div>
            <div v-if="tab == 1">
              <el-tag type="warning" v-if="row.status === 0">未读</el-tag>
              <el-tag type="info" v-else-if="row.status === 1">已读</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型">
          <template v-slot="{row}">
            <span v-if="row.type === 1">系统通知</span>
            <span v-else-if="row.type === 2">短信通知</span>
            <span v-else-if="row.type === 3">邮件通知</span>
          </template>
        </el-table-column>
        <el-table-column v-if="tab == 1" prop="sendUser" label="发送人"></el-table-column>
        <el-table-column v-if="tab == 0" prop="sendStatus" label="发送方式">
          <template v-slot="{row}">
            <span v-if="row.sendStatus === 1">普通发送</span>
            <span v-else-if="row.sendStatus === 2">定时发送</span>
          </template>
        </el-table-column>
        <el-table-column v-if="tab == 0" prop="sendTime" label="发送时间">
          <template v-slot="{row}">
            <span>{{row.sendTime ? row.sendTime : "暂无"}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180px"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- <el-button
              v-if="scope.row.status === 0"
              size="mini"
              type="warning"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>
            <el-button
              v-if="scope.row.status === 0"
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>-->
            <el-button size="mini" type="primary" @click="handleInfo(scope.$index, scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchform.pageNum"
        :page-sizes="[5, 10, 15]"
        :page-size="searchform.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>

    <!-- 新增/编辑 -->
    <add-and-update ref="addAndUpdate" v-model="dialogVisible" @refresh="refresh"></add-and-update>
  </div>
</template>

<script>
import { listCreatePage, listRecivePage } from "@/api/notice";
import addAndUpdate from "./add-and-update/index.vue";
export default {
  name: "notice",
  components: { addAndUpdate },
  props: {
    tab: {
      type: String,
      default: "0"
    }
  },
  data() {
    return {
      searchform: {
        pageNum: 1,
        pageSize: 5,
        key: "",
        status: this.status
      },
      total: 0,
      data: [],
      status: {
        my: [],
        recive: [
          { value: 0, label: "未读" },
          { value: 1, label: "已读" }
        ]
      },
      dialogVisible: false
    };
  },
  created() {
    this.list();
  },
  methods: {
    async list() {
      if (this.tab === "0") {
        const { data } = await listCreatePage(this.searchform);
        this.data = data.data;
        this.searchform.pageNum = data.pageNum;
        this.searchform.pageSize = data.pageSize;
        this.total = data.total;
      } else {
        const { data } = await listRecivePage(this.searchform);
        this.data = data.data;
        this.searchform.pageNum = data.pageNum;
        this.searchform.pageSize = data.pageSize;
        this.total = data.total;
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.searchform.pageNum = val;
      this.list();
    },
    handleAdd() {
      this.dialogVisible = true;
    },
    handleEdit(index, row) {},
    handleInfo(index, row) {
      this.$router.push(`/system/notice/info/${row.id}`);
    },
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          if (index === 0) {
            this.searchform.pageNum--;
          }
          this.list();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    refresh() {
      this.searchform = {
        pageNum: 1,
        pageSize: 5,
        key: ""
      };
      this.dialogVisible = false;
      this.list();
    }
  }
};
</script>

<style lang="scss">
.notice {
  &-container {
  }

  &-search {
    height: 70px;
    padding: 10px 10px;
    border-radius: 5px;
    background-color: #fff;
  }

  &-body {
    border-radius: 5px;
    background-color: #fff;
    margin: 20px 0px;
    padding: 20px 10px;
  }

  &-cmethod {
    /* 
    这两个属性就是配合文字溢出
    */
    white-space: nowrap;
    overflow: hidden;
    /* 
    text-overflow：文字溢出时的处理方式
        clip：裁掉
        ellipsis：省略号（...）
    */
    text-overflow: clip;
  }
}
.el-pagination {
  text-align: center;
}

.demo-table-expand {
  font-size: 0;
  & label {
    color: #99a9bf;
  }
  & .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
  }
}
</style>